<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>{$data.user.status ==1 ? '续费会员' : '开通会员'}</title>
    <link rel="stylesheet" href="/static/vip2/css/vip_center_not.css?v=1.12334">
    <link rel="stylesheet" href="/static/vip2/css/common.css?v=2019.11.133">
</head>

<script src="/static/astro_explain_new/js/jquery-1.11.3.min.js"></script>
<script>
    var domain = '{$domain}'
    // console.log('{:json_encode($data)}')
    // var data = JSON.parse('{:json_encode($data)}')
    var data = JSON.parse(`{:str_replace('\`','&lsquo;', json_encode($data))}`)
    var app_type = '{$app_type}'
    var version = '{$version}'
    // console.log('data=', data, 'app_type=', app_type)
    window.onresize = function () {
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 37.5 + 'px'
    }
    // window.onresize();
</script>
<script src="/static/vip2/js/common_func.js?v=20230705"></script>
<script src="/static/vip2/js/vip_center_not.js?v=20230705"></script>
<script src="/static/vip2/js/common_statistics.js?v=20230705"></script>


<body class="body_con">
<!--顶部背景图片-->
<div class="header_bg"></div>
<!--<div class="nav" style="{$is_all_screen == 0 ? 'padding-top:3rem;':'padding-top:5rem;';}">-->
<div class="nav"
     style="{$app_type=='ios'?($is_all_screen==0?'padding-top:3rem':'padding-top:5rem'):($h_of_android_status_bar==0?'padding-top:3rem':('padding-top:'.(($h_of_android_status_bar+10)/10.0).'rem'))}">
    {$data.user.status ==1 ? '续费会员' : '开通会员'}
</div>
<!--<div class="header_card" style="{$is_all_screen == 0 ? 'margin-top:9rem;':'margin-top:12rem;';}">-->
<div class="header_card"
     style="{$app_type=='ios'?($is_all_screen==0?'margin-top:9rem':'margin-top:12rem'):($h_of_android_status_bar==0?'margin-top:9rem':('margin-top:'.(7+($h_of_android_status_bar)/10.0).'rem'))}">
    <img class="bg_img" src="{$oss}vip/images/vip_center/vip{$data.user.vip}_bg.png">
    <div class="content_con">
        <!--顶部部分-->
        <div class="top_con">
            <!--左侧部分-->
            <div class="left_con">
                <div id="scroll_con" class="scroll_con">
                    <div id="card_top_con_list" class="card_top_con_list">
                        {foreach $data.hint_list as $k => $v}
                        <div class="card_top_con">
                            <img class="avatar_img" onerror="onerror=null;src='{$oss}/avatar_default_2.png'"
                                 src="{$v.avatar}">
                            <div class="hints_text">{$v.nickname}刚刚开通了小行星会员</div>
                        </div>
                        {/foreach}
                    </div>
                </div>
                <img class="vip_img" src="{$oss}vip/images/vip_center/vip_tag.png">

                <div class="center_con">
                    {if 0 == $data.user.status }
                    <!--未开通-->
                    <div class="not_buy_label">亲爱的，{$data.user.name}</div>
                    {else/}
                    <!--已过期-->
                    {if $data.user.vip !=8 }
                    <div class="progress_con">
                        <div class="left_progress" id="progress"></div>
                    </div>
                    <div class="hint_label">还差{$data.progress.next_vip_level_star_num-$data.user.star_num}经验即可升级V{$data.user.vip+1}会员</div>
                    {/if}
                    {/if}
                </div>
            </div>

            <!--右侧奖牌-->
            <img class="right_medal_img" src="{$oss}vip/images/vip_right/vip{$data.user.vip}.png">
        </div>

        <!-- 底部部分 -->
        {if 0 == $data.user.status }
        <div class="bottom_not_buy_con">
            <div class="left_title">开通后，平均可省720元/年</div>
            <div class="right_btn" onclick="vipDetailBtnClick()">查看详情</div>
        </div>
        {else/}
        <!--已过期-->
        {if 2 == $data.user.status }
        <div class="bottom_expired_label">您的会员已经到期 将无法享受六项会员权益</div>
        {/if}
        <!--未过期-->
        {if 1 == $data.user.status }
        <div class="bottom_expired_label">有效期至{$data.user.vip_end_time},续费会员星力值光速提升</div>
        {/if}
        {/if}
    </div>
</div>

<!--中间商品部分-->
<div class="goods_con">
    {foreach $data.goods_list as $k => $v}
    <div class="item_con {$k==3?'item_con_last':''}">
        <div class="top_text">{$v.time}</div>
        <div class="price_con">
            <div class="left_unit">￥</div>
            <div class="right_price">{$v.price}</div>
        </div>
        <div class="bottom_text">{$v.des}</div>
    </div>
    {/foreach}
</div>
{if condition="$sub_agr_url"}
{if condition="$is_ios"}
<div class="agreement">连续订阅到期自动续费，可随时取消。</div>
<div class="agreement">开通前请阅读<a href="javascript:;" onclick="commonJsToNative('link','{$sub_agr_url}')">《准了会员协议及连续订阅协议》</a></div>
{else/}
<div class="agreement">开通前请阅读<a href="javascript:;" onclick="commonJsToNative('link','{$sub_agr_url}')">《准了会员协议》</a></div>
{/if}
{/if}
<!--权益部分-->
<div class="rights_con">
    <div class="header_con">
        <div class="left_con">
            <div class="bg"></div>
            <div class="title">会员尊享{$vip_boon}大权益</div>
        </div>
        <div class="right_con">
            <div class="title" onclick="rightsDetailClick()">查看详细权益说明</div>
            <div class="arrow"></div>
        </div>
    </div>
    <div class="center_con">
        {foreach $data.right_list as $k => $v}
        <div class="item_con" onclick="rightItemClick({$k})">
            <img class="icon" src="{$oss}vip/images/vip_right/{$v.icon}">
            <div class="title">{$v.title}</div>
        </div>
        {/foreach}
    </div>
</div>

<!--常见问题-->
<div class="qa_con" onclick="qaConClick()">
    <div class="left_con">
        <img class="header_img" src="{$oss}vip/images/vip_center/qa_header.png">
        <div class="title">常见问题</div>
    </div>
    <div class="right_con">
        <div class="title">查看</div>
        <div class="arrow"></div>
    </div>
</div>


<!--立即续费按钮-->
<div class="bottom_con">
    <div class="btn" id="pay_btn" onclick="buyBtnClick()">{$data.user.status==0?'立即开通':'立即续费'}</div>
</div>

<!--蒙层-->
{if 0 == $data.user.status}
<div class="alert_con" id="alert_con" onclick="alertConClick()">
    <div class="content_con">
        <div class="top_con">
            <img class="img" src="{$oss}vip/images/vip_center/alert_header_img.png">
            <div class="list_con">
                {foreach $data.alert.list as $k => $v}
                <div class="item_con">
                    <div class="left_con">
                        <div class="left_text">{$v.title}</div>
                        <div class="sep">/</div>
                    </div>
                    <div class="right_con">
                        <div class="unit_text">￥</div>
                        <div class="price_text">{$v.price}</div>
                    </div>
                </div>
                {/foreach}
            </div>
            <div class="line"></div>
            <div class="left_circle"></div>
            <div class="right_circle"></div>
            <div class="total_con">
                <div class="title">共节省</div>
                <div class="right_con">
                    <div class="unit_text">￥</div>
                    <div class="price_text">{$data.alert.total_price}</div>
                </div>
            </div>
        </div>
        <div class="bg_top"></div>
        <div class="arrow_left"></div>
        <div class="arrow_right"></div>
        <div class="bg_bottom_con" onclick="buyBtnClick('0')">
            <div class="btn">立即开通小行星会员</div>
        </div>
    </div>
</div>
{/if}
</body>
<script>
    if (0 != data.user.status) {
        //初始化progress
        document.getElementById('progress').style.cssText = "width:" + parseInt(data.user.star_num) / parseInt(data.progress.next_vip_level_star_num) * 100 + "%;"
    }
</script>
{include file="../apps/web/view/public/sensors.html" /}

</html>
